<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>星云足球</title>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="assets/logo.png" type="image/x-icon">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script src="https://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>
    <script src=js/nebPay.js></script>
    <link href="https://cdn.bootcss.com/toastr.js/latest/toastr.css" rel="stylesheet">
    <link rel=stylesheet href=./css/main.css>
    <script src="js/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/nebulas@0.5.0/dist/nebulas.js"></script>

</head>

<body id="translation">

<header class="navbar navbar-static-top bs-docs-nav" id="top">
    <div class="container">
        <div class="navbar-header" >
            <button class="navbar-toggle collapsed " type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="glyphicon glyphicon-menu-hamburger" id="nav-button"></span>
            </button>
            <img src="./assets/cc535e43e566c88eb96103bdb4e8e42e.png" style="width: 50px;height: 50px;float: left;margin-top:5px;margin-right: 10px;" />
            <a href="../" class="navbar-brand"  style="color:#ffffff;">Hello, WorldCup!</a>
        </div>
        <nav id="bs-navbar" class="navbar-collapse collapse navbar-inverse" aria-expanded="false" style="height: 1px;">
            <ul class="nav navbar-nav my-nav">
                <li>
                    <a href="./how.html" >教程</a>
                </li>
                <li >
                    <a id="self-info" href="javascript:;" onclick="getUserRecord()">个人信息</a>
                </li>
                <li >
                    <a href="javascript:;" onclick="$('#getNasModel').modal('show')" >获取免费 0.1 Nas !</a>
                </li>
                <li >
                    <a id="phoneButton1" href="javascript:;" onclick="deposit()" style="display: none" >兑换Coin</a>
                </li>
                <li >
                    <a id="phoneButton2" href="javascript:;" onclick="withdraw()"  style="display: none">提现Nas</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
                <li><a href="https://chrome.google.com/webstore/detail/nasextwallet/gehjkhmhclgnkkhpfamakecfgakkfkco" >下载Nas网页插件</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="bs-docs-header" id="top-content" tabindex="-1">
    <div class="container">
        <h1 ><span id="nav-title" style="color: #ffffff;font-size: 5rem">拒绝伪去中心化</span></h1>
        <p>没有数据库，不存储任何信息，甚至没有后台开发；比赛、预测、派奖、兑换，统统上链；智能合约自动执行。</p>
        <p>区块链是最诚实的数据库和后台系统，让区块链说话！</p>
    </div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 nav-slide hidden-print hidden-xs hidden-sm affix-top" role="complementary" >
    <div class="user-Info">
        <img id="headimg" src="assets/headimg2.png" >
        <p style="margin-top: 4px">NAS-Wallet :</p>
        <p><span id="address"></span></p>
        <p  style="float: right;margin-top: 1rem">SoccerCoin : <span id="balance"></span></p>

        <div class="row-3" style="margin-top: 4rem">
            <button  style="margin-right: 3rem;" onclick="deposit()">兑换Coin</button>
            <button onclick="withdraw()">提现Nas</button>
        </div>
    </div>
    <p style="margin-top: 3rem;font-size: 18px;font-weight: 200">竞猜记录 ：</p>
    <div id = "betInfo">
    <script type="text/x-handlebars-template"  id="betScript">
        {{#if result}}
        {{#each result}}
    <div class="betRecord" style="border-radius: 5px;border-color: #aa1111;">
        <table class="table recordTable">
            <tr>
                <td style="border-color:  #563d7c">{{homeName}} VS {{awayName}}</td>
            </tr>
            <tr>
                <td>{{choose}}</td>
            </tr>
            <tr>
                <td>{{amount}} SoccerCoin</td>
            </tr>
            <tr>
                <td><p style="text-align: left">交易区块哈希：</p>{{txid}}</td>
            </tr>
        </table>
    </div>

        {{/each}}
        {{/if}}
    </script>
    </div>
</div>
<div id="matchContainer" class="col-xs-12 col-md-9" role="main" ></div>
</div>
<div >
<script type="text/x-handlebars-template" id="myTemplate">
    {{#if result}}
    {{#each result}}
    <div class="col-xs-12 col-md-6">
        <div _ngcontent-c12="" class="match-list-box">
            <div class="matchID" style="display:none">{{id}}</div>
            <div _ngcontent-c12="" class="top">
                    <div _ngcontent-c12="" class="top-text">

                        <span _ngcontent-c12="" class="endtime">结束时间: <span class="endtimeShow">{{startTime}}</span></span>
                    </div>
            </div>
            <HR align=center width=100% color= #a2a9b9 SIZE=10>

            <div _ngcontent-c12="" class="center">
                <div _ngcontent-c12="" class="match-team ng-tns-c12-12">
                    <span _ngcontent-c12="" class="team team-left ng-tns-c12-12">
                        <div _ngcontent-c12="" class="team-logo">
                            <img _ngcontent-c12="" class="ng-tns-c9-9" alt="" src={{homeimgUrl}}>
                        </div>
                        <div _ngcontent-c12="" class="team-name overEllipse">{{homeName}}
                            <br _ngcontent-c12="" class="ng-tns-c12-12">
                            <span _ngcontent-c12="" class="ng-tns-c12-12">主队</span>
                        </div>
                    </span>
                    <div _ngcontent-c12="" class="match-team-center ng-tns-c12-12">
                        <div _ngcontent-c12="" class="center-line"></div>
                        <div _ngcontent-c12="" class="center-txt">VS
                        </div>
                        <div _ngcontent-c12="" class="center-line"></div>
                    </div>
                    <span _ngcontent-c12="" class="team team-right ng-tns-c12-12">
                        <div _ngcontent-c12="" class="team-logo">
                            <img _ngcontent-c12="" class="ng-tns-c9-9" alt="" src={{awayimgUrl}}>
                        </div>
                        <div _ngcontent-c12="" class="team-name overEllipse">{{awayName}}
                            <br _ngcontent-c12="" class="ng-tns-c12-12">
                            <span _ngcontent-c12="" class="ng-tns-c12-12">客队</span>
                        </div>
                    </span>
                </div>
            </div>
            <HR align=center width=100% color=#a2a9b9 SIZE=5>
            <div _ngcontent-c12="" class="bet-btn-box ng-tns-c12-12">
                <div _ngcontent-c12="" class="row-3" >
                    <div _ngcontent-c12="" class="bet-btn brightNess ng-tns-c12-12" onclick="showBetModel(this)">
                        <div _ngcontent-c12="" class="ng-tns-c12-12 btn-choose-type" >主胜</div>
                        <div style="text-align:center" class="btn-choose-amount"><span class="choose-amount-now">{{homeAmount}}</span> | {{homeSp}}</div>
                    </div>
                    <div _ngcontent-c12="" class="bet-btn brightNess ng-tns-c12-12" onclick="showBetModel(this)">
                        <div _ngcontent-c12="" class="ng-tns-c12-12 btn-choose-type" >平局</div>
                        <div style="text-align:center" class="btn-choose-amount"><span class="choose-amount-now">{{drawAmount}}</span> | {{drawSp}}</div>

                    </div>
                    <div _ngcontent-c12="" class="bet-btn brightNess ng-tns-c12-12" onclick="showBetModel(this)">
                        <div _ngcontent-c12="" class="ng-tns-c12-12 btn-choose-type"  >客胜</div>
                        <div style="text-align:center" class="btn-choose-amount"><span class="choose-amount-now">{{awayAmount}}</span> | {{awaySp}}</div>

                    </div>
                </div>
            </div>

            <div _ngcontent-c12="" class="bottom">
                <div _ngcontent-c12="" class="bet-bottom">
                    <div _ngcontent-c12="" class="end-time" style="color:#a2a9b9">最小金额：100 SoccerCoin
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{/each}}
    {{/if}}

</script>



</div>
</div>
<!--投注弹出框-->
<div class="modal fade" id="betModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">确认竞猜选项</h4>
            </div>
            <div class="modal-body">
                <div id = 'betMatchId' style="display: none"></div>
                <h4>竞猜前，请务必查看教程了解规则</h4>
                <p>显示赔率仅供参考，会随着竞猜过程不断变化；比赛前5分钟关闭竞猜；</p>
                <h4>比赛结束后，智能合约自动计算</h4>
                <p>竞猜金额须大于100 Soccer Coin !</p>
                <HR align=center width=100% color= #a2a9b9 SIZE=10>

                <h4 style="text-align: center;margin-top: 20px;"><span id="betHomeName"></span>  vs  <span id="betAwayName"></span></h4>
                <h4 style="text-align: center;margin-top: 20px;"><span id="betChoose"></span></h4>
                <HR align=center width=100% color= #a2a9b9 SIZE=10>

                <div class="form-group">
                    <label for="bet-amount" class="control-label">竞猜金额(Soccer Coin):</label>
                    <input type="text" class="form-control" id="bet-amount" style="width: 90%;text-align: center;margin: 0 auto;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="goBetButton()">确认竞猜</button>
            </div>
        </div>
    </div>
</div>
<!--无插件弹出框-->
<div class="modal fade" id="noWalletModel" tabindex="-1" role="dialog" aria-labelledby="noWallet">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="noWallet">请先安装星云钱包插件</h4>
            </div>
            <div class="modal-body">
                <h4>竞猜需要依赖星云钱包插件</h4>
                <p>不知道如何安装？请点击<a href="./how.html">这里</a>查看教程</p>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</div>
<!--兑换弹出框-->

<div class="modal fade" id="depositModel" tabindex="-1" role="dialog" aria-labelledby="deposit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="deposit">用Nas兑换应用内Soccer Coin</h4>
            </div>
            <div class="modal-body">
                <h4>什么是Soccer Coin?</h4>
                <p>Soccer Coin是本应用内用于竞猜的积分。与Nas保持固定兑换比例1000 : 1;</p>
                <p>你可以随时选择兑换积分或者提现为Nas,所有操作智能合约自动执行</p>
                <div class="form-group">
                    <label for="bet-amount" class="control-label">兑换数量(Nas):</label>
                    <input type="text" class="form-control" id="depositAmount" style="width: 90%;text-align: center;margin: 0 auto;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="depositButton()">确认兑换</button>

                </div>
            </div>
        </div>
    </div>
</div>

<!--提现弹出框-->
<div class="modal fade" id="withdrawModel" tabindex="-1" role="dialog" aria-labelledby="withdraw">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="withdraw">Soccer Coin即时兑换Nas</h4>
            </div>
            <div class="modal-body">
                <h4>兑换限制</h4>
                <p>Soccer Coin最小提现额为100 coin</p>
                <p>免费获取的100 SoccerCoin 需要竞猜一次才能提现</p>
                <p>成功后智能合约自动发送Nas到你的地址</p>

                <div class="form-group">
                    <label for="bet-amount" class="control-label">提现数量(Soccer Coin):</label>
                    <input type="text" class="form-control" id="withdrawAmount" style="width: 90%;text-align: center;margin: 0 auto;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="withdrawButton()">确认提现</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--交易成功弹出框-->
<div class="modal fade" id="tranSuccessModel" tabindex="-1" role="dialog" aria-labelledby="successInfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="successInfo">发送交易成功</h4>
                <p>区块链打包需要一定时间，具体以交易确认及返回信息为准，确认后即可刷新状态</p>
            </div>
            <div class="modal-body">
                <h4>区块链交易txHash : </h4>
                <p id="successId"></p>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
</div>
<!--获取免费Nas弹出框-->
<div class="modal fade" id="getNasModel" tabindex="-1" role="dialog" aria-labelledby="successInfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="getNas">获取免费100 SoccerCoin（0.1Nas）</h4>
                <!--<p style="margin-top: 2rem">Sorry,开发者能力有限</p>-->
                <!--<p>免费获取活动暂时停止.</p>-->
                <!--<p>后续会择机重新开放</p>-->
                <!--<p>用0.1nas换取积分玩一玩呀 :-D</p>-->
                <p style="margin-top: 2rem">调用合约免费获取</p>
                <p>竞猜后即可提现.</p>
                <p>任何恶意刷量行为都不会得到回报.</p>

                <p>开发者能力有限，活动随时停止 :-D</p>


            </div>
            <div >

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="getAward()">发送交易</button>

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人信息弹出框-->
<div class="modal fade" id="user-infoModel" tabindex="-1" role="dialog" aria-labelledby="withdraw">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="user-info">个人信息</h4>
            </div>
            <div class="modal-body">
                <p>钱包地址: <span id="user-address"></span></p>
                <p>余额: <span id="user-balance"></span> Soccer Coin</p>
                <HR align=center width=100% color= #a2a9b9 SIZE=10>

                <div class="form-group">
                    <table class="table" id="recordTable">
                        <script type="text/x-handlebars-template" id="recordTemplate">

                        <caption>地址记录.</caption>
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>类型</th>
                            <th>备注</th>
                            <th>金额</th>
                            <th>时间</th>
                        </tr>
                        </thead>

                        <tbody>

                            {{#if result}}
                            {{#each result}}
                        <tr>
                            <th scope="row">{{index}}</th>
                            <td>{{type}}</td>
                            <td>{{remark}}</td>
                            <td>{{amount}}</td>
                            <td>{{time}}</td>

                        </tr>
                            {{/each}}
                            {{/if}}
                        </script>

                        </tbody>

                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--email-->
<div class="modal fade" id="emailModel" tabindex="-1" role="dialog" aria-labelledby="email">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">开发者邮箱</h4>
            </div>
            <div class="modal-body">
                <h4>huangkenc@126.com</h4>

            </div>

            <div >

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="mobileTranModel" tabindex="-1" role="dialog" aria-labelledby="successInfo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >发送交易成功</h4>
                <p>区块链打包需要一定时间，具体以交易确认及返回信息为准，确认后即可刷新状态</p>
            </div>
            <div class="modal-body">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="bs-docs-footer">
    <div class="container">
        <ul class="bs-docs-footer-links">
            <li><a href="">GitHub 仓库</a></li>
            <li><a href="www.nebulas.io">Nas星云链</a></li>
            <li><a href="">非盈利项目</a></li>
            <li><a href="#" onclick="$('#emailModel').modal('show')">联系开发者</a></li>
        </ul>

    </div>
</footer>
</body>

</html>